<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Screen Reader Accessible Blockly Game</title>

    <!-- Load Blockly -->
    <script src="../third-party/blockly/blockly_compressed.js"></script>
    <script src="../third-party/blockly/blocks_compressed.js"></script>
    <script src="../third-party/blockly/javascript_compressed.js"></script>
    <script src="../third-party/blockly/msg/js/en.js"></script>

    <!-- Load accessibleBlockly -->
    <script src="../third-party/blockly/accessible/messages.js"></script>

    <script src="../third-party/blockly/accessible/libs/es6-shim.min.js"></script>
    <script src="../third-party/blockly/accessible/libs/angular2-polyfills.min.js"></script>
    <script src="../third-party/blockly/accessible/libs/Rx.umd.min.js"></script>
    <script src="../third-party/blockly/accessible/libs/angular2-all.umd.min.js"></script>

    <script src="../third-party/blockly/accessible/utils.service.js"></script>
    <script src="../third-party/blockly/accessible/notifications.service.js"></script>
    <script src="../third-party/blockly/accessible/audio.service.js"></script>
    <script src="../third-party/blockly/accessible/block-connection.service.js"></script>
    <script src="../third-party/blockly/accessible/block-options-modal.service.js"></script>
    <script src="../third-party/blockly/accessible/keyboard-input.service.js"></script>
    <script src="../third-party/blockly/accessible/tree.service.js"></script>
    <script src="../third-party/blockly/accessible/toolbox-modal.service.js"></script>
    <script src="../third-party/blockly/accessible/translate.pipe.js"></script>

    <script src="../third-party/blockly/accessible/field-segment.component.js"></script>
    <script src="../third-party/blockly/accessible/block-options-modal.component.js"></script>
    <script src="../third-party/blockly/accessible/toolbox-modal.component.js"></script>
    <script src="../third-party/blockly/accessible/sidebar.component.js"></script>
    <script src="../third-party/blockly/accessible/workspace-block.component.js"></script>
    <script src="../third-party/blockly/accessible/workspace.component.js"></script>
    <script src="../third-party/blockly/accessible/app.component.js"></script>

    <link rel="stylesheet" type="text/css" href="../third-party/blockly/accessible/media/accessible.css">

    <!-- Libraries for MIDI playback. -->
    <script src="../third-party/SoundJS/soundjs-0.6.2.min.js"></script>

    <script src="js/blocks.js"></script>
    <script src="js/music-player.js"></script>

    <style>
      body {
        font-family: sans-serif;
      }
      h1, h2 {
        float: left;
        font-weight: normal;
        margin: 0 50px 0 0;
      }
      h1 {
        font-size: 140%;
      }
      h2 {
        font-size: 120%;
        margin-top: 4px;
      }

      button {
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: .25rem;
        color: #000;
        cursor: pointer;
        font-weight: 400;
        line-height: 1.25;
        margin: 2px 0;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
      }
      button:disabled {
        cursor: not-allowed;
        opacity: .65;
      }

      .mainBlocklyDiv {
        display: inline-block;
        padding-left: 10px;
        margin-top: 20px;
        min-height: 1000px;
      }

      *:focus {
        background: rgba(249, 237, 190, 0.5);
      }
    </style>
  </head>
  <body>
    <div style="float: right;">
      <a href="./help.html">Learn more...</a>
    </div>

    <div style="float: right; margin-right: 30px;">
      <a href="./index.html">Home</a>
    </div>

    <music-game-stage></music-game-stage>

    <script src="js/utils.service.js"></script>
    <script src="js/generic-modal.service.js"></script>
    <script src="js/level-manager.service.js"></script>
    <script src="js/levels.js"></script>
    <script src="js/generic-modal.component.js"></script>
    <script src="js/stage.component.js"></script>
    <script>
      var musicPlayer = new MusicPlayer();
      var activeTimeouts = [];

      // The code generated by the blocks calls this function.
      function addChord(pitches, durationInBeats) {
        musicPlayer.addPlayerChord(pitches, durationInBeats);
      }

      function runCodeToPopulatePlayerLine() {
        // Generate JavaScript code and run it.
        window.LoopTrap = 1000;
        Blockly.JavaScript.INFINITE_LOOP_TRAP =
            'if (--window.LoopTrap == 0) throw \'Infinite loop.\';\n';
        var code = Blockly.JavaScript.workspaceToCode(blocklyApp.workspace);
        Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
        try {
          eval(code);
        } catch (e) {
          alert(e);
        }
      }

      var ACCESSIBLE_GLOBALS = {
        mediaPathPrefix: '../third-party/blockly/accessible/media/',
        // Additional custom buttons for the sidebar.
        customSidebarButtons: [{
          text: 'Instructions',
          // Gets set by musicGame.StageComponent.
          action: null,
          id: 'musicGameInstructionsBtn'
        }, {
          text: 'Run your program',
          // Gets set by musicGame.StageComponent.
          action: null,
          id: 'musicGameRunProgramBtn'
        }]
      };

      document.addEventListener('DOMContentLoaded', function() {
        ng.platform.browser.bootstrap(musicGame.StageComponent);
      });
    </script>
  </body>
</html>
